import React, { Component } from 'react'
import { Icon, Button, Table, Switch, Form, Input } from 'antd'
import { IndexLink, Link } from 'react-router'



const FormItem = Form.Item;


export class Answers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableDataLoading: false,
      columns: [{
        title: '启用',
        dataIndex: 'enable',
        key: 'enable',
        render: () => <Switch checkedChildren={'开'} unCheckedChildren={'关'} />,
      }, {
        title: '活动名称',
        dataIndex: 'name',
        key: 'name',
        render: text => <a href="#">{text}</a>,
      }, {
        title: '常规设定',
        dataIndex: 'time',
        key: 'time',
        render: () => (<div className="setting">
                        <p>
                        <span className="setting-item">题目顺序随机</span>
                        <Switch checkedChildren={'开'} unCheckedChildren={'关'} />
                        </p>
                        <p>
                        <span className="setting-item">可返回答案</span>
                        <Switch checkedChildren={'开'} unCheckedChildren={'关'} />
                        </p>
                        <p>
                        <span className="setting-item">返回排名</span>
                        <Switch checkedChildren={'开'} unCheckedChildren={'关'} />
                        </p>
                      </div>)

      }, {
        title: '功能',
        dataIndex: 'address',
        key: 'address',
        render: (text,record) => (<div className="setting">
                      <p>
                      <Button type="primary"> 
                          <Link to={{pathname:'/answers/manager/',query:{id:record.key}}} activeClassName='route--active'>
                            管理题目
                          </Link></Button>
                      </p>
                      <p><Button type="primary" onClick={this.test}>计分策略</Button></p>
                      <p><Button type="primary">配置表单</Button></p>
                      <p><Button type="primary">统计查看</Button></p>
                    </div>)
      }, {
        title: 'Action',
        key: 'action',
        render: (text, record) => (
          <span>
            <a href="#">Action 一 {record.name}</a>
            <span className="ant-divider" />
            <a href="#">Delete</a>
            <span className="ant-divider" />
            <a href="#" className="ant-dropdown-link">
              More actions<Icon type="down" />
            </a>
          </span>
        ),
      }]
    }
    this.test=this.test.bind(this)
  }
  test(){
    console.log(this.props)
     
  }
  componentWillMount() {
    console.log('组件渲染前', this.props)

    this.props.getAllTerms()

  }
  render() {
    const {answerslist}=this.props.answers||[];
    console.log(this.props)


    return (
      <div id="answers">
          <div className="message wrap">
          <h2><Icon type="exclamation-circle-o" />为了获取良好的体验，请在宽屏下操作</h2>
          </div>
          <div className="container-answers">
            <div className="add-columns">
        
            </div>
            <Table columns={this.state.columns} dataSource={answerslist}  loading={this.state.tableDataLoading} />
          </div>
      </div>

    )
  }
}


export default Answers
